import { CustomTabBar } from '@/store/custom-tab-bar'
import { CoverImage, CoverView } from '@tarojs/components'
import { inject, observer } from '@tarojs/mobx'
import Taro, { Component } from '@tarojs/taro'
import classnames from 'classnames'
import './index.scss'

const TabBar = {
  color: '#666666',
  borderStyle: 'white',
  selectedColor: '#FB335D',
  backgroundColor: '#FFFFFF',
  list: [
    {
      pagePath: 'pages/index/index',
      text: '首页',
      iconPath: './images/skin/default/index.png',
      selectedIconPath: './images/skin/skin_red/index_on.png'
    },
    {
      pagePath: 'pages/category/index',
      text: '分类',
      iconPath: './images/skin/default/find.png',
      selectedIconPath: './images/skin/skin_red/find_on.png'
    },
    {
      pagePath: 'pages/shopCart/index',
      text: '购物车',
      iconPath: './images/skin/default/cart.png',
      selectedIconPath: './images/skin/skin_red/cart_on.png'
    },
    {
      pagePath: 'pages/userCenter/index',
      text: '个人中心',
      iconPath: './images/skin/default/my.png',
      selectedIconPath: './images/skin/skin_red/my_on.png'
    }
  ]
}

interface Props {
  customTabBar: CustomTabBar
}
@inject('customTabBar')
@observer
export default class Index extends Component<Props> {
  shouldComponentUpdate(nextProps) {
    return this.props.customTabBar.selectedIndex !== nextProps.customTabBar.selectedIndex
  }
  switch = (item, index) => {
    const { customTabBar } = this.props
    // 阻止频繁点击
    if (customTabBar.processing) return false
    // 阻止重复点击
    if (customTabBar.selectedIndex === index) return false
    customTabBar.setProcessing(true)
    // 视觉上tab样式立即切换过去
    customTabBar.setSelectedIndex(index)
    // 切换页面
    Taro.switchTab({ url: '/' + item.pagePath }).then((res) => {
      console.log('switchTab', res, index)
      customTabBar.setProcessing(false)
    })
  }

  render() {
    const { list, color, selectedColor, borderStyle, backgroundColor } = TabBar
    const { selectedIndex, visible, redDot } = this.props.customTabBar
    return (
      visible && (
        <CoverView className="custom-tab-bar" style={`background-color:${backgroundColor};`}>
          <CoverView className="tab-bar-border" style={`background-color:${borderStyle}`}></CoverView>
          {list.map((item, index) => {
            return (
              <CoverView
                key={`tab${index}`}
                className={selectedIndex === index ? 'tab-bar-item selected' : 'tab-bar-item'}
                onTouchEnd={this.switch.bind(this, item, index)}
              >
                {redDot[index] && <CoverView className="tab-bar-reddot"></CoverView>}
                {/* 两个CoverImage解决安卓下闪烁问题 */}
                <CoverImage className={classnames('tab-bar-icon', selectedIndex === index && 'show')} src={'.' + item.selectedIconPath}></CoverImage>
                <CoverImage className={classnames('tab-bar-icon', selectedIndex !== index && 'show')} src={'.' + item.iconPath}></CoverImage>
                <CoverView className="tab-bar-title" style={`color:${selectedIndex === index ? selectedColor : color}`}>
                  {item.text}
                </CoverView>
              </CoverView>
            )
          })}
        </CoverView>
      )
    )
  }
}
